$(function () {
  // 获取分类数据并渲染
  $.ajax({
    url: BigNew.category_list,
    type: 'get',
    success (backData) {
      //   console.log(backData)
      let html = template('categoryTem', backData)
      //   console.log(html)
      $('#selCategory').html(html)
    }
  })

  // 获取列表的方法
  function getList (page, callback) {
    // 分类的值 默认是空
    let type = $('#selCategory').val()
    // 状态值 默认是空
    let state = $('#selStatus').val()
    // console.log('type:', type)
    // console.log('state:', state)
    $.ajax({
      url: BigNew.article_query,
      data: {
        type,
        state,
        // 页码
        page
      },
      success (backData) {
        console.log(backData)
        // { data:[...] } 模板引擎中循环的是 backData.data中的data
        let html = template('articleTem', backData.data)
        // 渲染到页面上
        $('tbody').html(html)
        // 传了callback 走callback
        if (callback) {
          // 调用callback 并传递服务器返回的数据
          callback(backData)
        } else {
          // 没有走创建分页插件的逻辑
          // 数据获取到之后 才可以创建分页插件
          let $pagination = $('.page').twbsPagination({
            totalPages: backData.data.totalPage,
            // 别给双数 不好看 一般给单数 好看一些能够到中间
            visiblePages: 5,
            first: '首页',
            last: '尾页',
            next: '下一页',
            prev: '上一页',
            // 页码改变回调函数
            // event 事件参数
            // page 当前的页面
            onPageClick: function (event, page) {
              // console.log(event)
              // console.log(page)
              // 传入具体的页面 并重新获取数据即可
              getList(page)
            }
          })
        }
      }
    })
  }

  // 获取文章的列表数据
  getList(1)

  // 筛选数据
  $('#btnSearch').click(function (e) {
    e.preventDefault()
    // 重新获取数据 筛选之后中间数据少了一般是从第一页开始
    getList(1, function (backData) {
      // console.log(backData)
      // 服务器返回的页面
      let totalPage = backData.data.totalPage
      // 本地分页插件的总页数
      let localTotalPage = $('.page').twbsPagination('getTotalPages')
      // 服务器返回的是否相同
      // if (totalPage != localTotalPage) {
      // console.log('不相等')
      $('.page').twbsPagination('changeTotalPages', totalPage, 1)
      // }
    }) // 可能还要写点逻辑,并且传入到 getList的内部 回调函数
  })

  // 点击删除
  $('tbody').on('click', '.btn-delete', function () {
    // 获取id
    let id = $(this)
      .parent()
      .attr('data-id')
    // console.log(id)
    if (confirm('老铁,你真的要删除这篇文章吗o(╥﹏╥)o')) {
      $.ajax({
        url: BigNew.article_delete,
        type: 'post',
        data: {
          id
        },
        success (backData) {
          // console.log(backData)
          if (backData.code == 204) {
            // 提示用户
            alert('删掉啦')
            // 获取插件中保存当前页
            let currentPage = $('.page').twbsPagination('getCurrentPage')
            // 重新获取数据
            getList(currentPage, function (backData) {
              // 服务器的总页数
              let totalPage = backData.data.totalPage
              // 本地的总页数
              let localTotalPage = $('.page').twbsPagination('getTotalPages')
              // 判断
              if (totalPage != localTotalPage) {
                // 判断本地的页码是否大于 服务器返回的总页数 如果是 需要修正一下
                if (currentPage > totalPage) {
                  currentPage = totalPage
                }
                // 重新设置总页数
                $('.page').twbsPagination(
                  'changeTotalPages',
                  totalPage,
                  currentPage
                )
              }
            })
          }
        }
      })
    }
  })

  // 文章类别select改变之后触发的回调函数
  $('#selCategory').change(function () {
    // console.log($(this).val())
    getList(1, function (backData) {
      // console.log(backData)
      // 服务器返回的页面
      let totalPage = backData.data.totalPage
      // 本地分页插件的总页数
      let localTotalPage = $('.page').twbsPagination('getTotalPages')
      // 服务器返回的是否相同
      // if (totalPage != localTotalPage) {
      // console.log('不相等')
      $('.page').twbsPagination('changeTotalPages', totalPage, 1)
    })
  })
})
